<!--
 * @Author: your name
 * @Date: 2020-05-25 05:17:45
 * @LastEditTime: 2020-05-25 05:34:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\04导航\02.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
    <style>
        body{
            max-width: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 这个并不算是导航条而是选项卡 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
    </div>
    <br>
    <br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
    </div>
    <br>
    <br>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-xs-4">
            <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">忘记密码</a></li>
            </ul>
        </div>
        <div class="col-xs-8">
            <div>
                <h1>登录</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                
            </div>
        </div>
    </div>
    <!-- 对于nav-tabs设置nav-stacked效果并不好 -->
    <!-- nav-tabs 平均分布 -->
    <br>
    <br>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
    </div>
    <!-- nav使用与局部导航,nav-bar适用于整站导航 -->
</body>
</html>